<template>
  <ul class="song-list">
    <li v-for="item in songs"
        :key="item.id"
        class="item">
      <div class="content">
        <h2 class="name">{{ item.name }}</h2>
        <p class="desc">{{ item.singer }}·{{ item.album }}</p>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'songList',
  props: {
    songs: {
      type: Array,
      default: () => {
        return []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.song-list {
  .item {
    display: flex;
    align-items: center;

    height: 64px;
    box-sizing: border-box;
    font-size: $font-size-medium;

    .content {
      line-height: 20px;
      // 测试出没什么影响
      flex: 1;
      overflow: hidden;

      .name {
        color: #fff;
        // 文本长度溢出显示省略号
        @include el();
        //text-overflow: ellipsis;
        //overflow: hidden;
        //white-space: nowrap;
      }

      .desc {
        margin-top: 4px;
        color: $color-text-d;
        // 文本长度溢出显示省略号
        @include el();
      }
    }
  }
}
</style>
